<!doctype html>
<html lang="en">
  <head>
    <title>Detail</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/superslides.css" rel="stylesheet">
    <link href="css/jquery.fancybox.css" rel="stylesheet">
    <link href="css/owl.carousel.css" rel="stylesheet">
    <link href="css/isotope.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body class="not-front page-portfolio2">
    <div id="main">
      <div class="top1-wrapper">
        <div class="container">
          <div class="top1 clearfix">
            <div class="phone1">P: 1-800-456-7890</div>
            <div class="email1">E: <a href="#">info.contact@gmail.com</a></div>
            <ul class="social-top clearfix">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
              <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
            </ul>
            <div class="login1"><a href="#">Login</a> &nbsp; | &nbsp; <a href="#">Register</a></div>
          </div>
        </div>
      </div>
      <div class="header-v2">
        <div class="container">
          <div class="header-inner clearfix">
            <header>
              <div class="logo_wrapper">
                <a href="index.html" class="logo">
                  <img src="images/logo.png" alt="" class="img-fluid">
                </a>
              </div>
            </header>
            <div class="my_search_wrapper">
              <div class="my_search_button">
                <a href="shopping-cart.html">
                  <i class="fa fa-search" aria-hidden="true"></i>
                </a>
              </div>
              <div class="my_search_popup">
                <form class="clearfix">
                  <input type="text" class="form-control" placeholder="Search...">
                  <a href="#" class=""><i class="fa fa-search"></i></a>
                </form>
              </div>
            </div>
            <nav class="navbar_ navbar navbar-expand-md clearfix">
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="nav navbar-nav sf-menu clearfix">
                  <li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
                  <li class="nav-item"><a href="about.html" class="nav-link">About us</a></li>
                  <li class="nav-item sub-menu">
                    <a href="portfolio.html" class="active nav-link">Portfolio <i class="fa fa-caret-down" aria-hidden="true"></i></a>
                    <div class="sf-mega">
                      <ul>

                        <li><a href="portfolio.html">Portfolio Fullwidth</a></li>
                        <li><a href="portfolio2.html">Portfolio Simple</a></li>
                        <li><a href="detail.html">Photo Detail Page</a></li>

                      </ul>
                    </div>
                  </li>
                  <li class="nav-item sub-menu">
                    <a href="#" class="nav-link">Blog <i class="fa fa-caret-down" aria-hidden="true"></i></a>
                    <div class="sf-mega">
                      <ul>

                        <li><a href="blog.html">Blog Right Side <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                          <div class="sf-mega">
                            <ul>
                              <li><a href="post.html">Post Right Side</a></li>


                            </ul>
                          </div>
                        </li>
                        <li><a href="blog-left.html">Blog Left Side <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                          <div class="sf-mega">
                            <ul>
                              <li><a href="post-left.html">Post Left Side</a></li>

                            </ul>
                          </div>
                        </li>

                      </ul>
                    </div>



                  </li>
                  <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
      <div class="breadcrumbs1_wrapper">
        <div class="container">
          <div class="breadcrumbs1"><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i></a><span>/</span>Photo Detail</div>
        </div>
      </div>
      <div id="content" class="page-section">
        <div class="container">
          <div class="title1">NATURE PHOTO</div>
          <div class="title2">LOREM IPSUM</div>

          <br><br>

          <div class="details">
            <figure><img src="images/detail.jpg" alt="" class="img-fluid"></figure>
            <div class="caption">
              <i class="fa fa-camera" aria-hidden="true"></i> Vivamus suscipit ipsum mauris, vitae lacinia nisi placerat id.
            </div>
          </div>

          <div class="row">
            <div class="col-md-5">
              <div class="title3">Morbi finibus bibendum velit</div>
              <p>
                Nulla rhoncus, elit bibendum elementum fermentum, lectus dolor aliquet lectus, sed scelerisque lectus nunc vitae leo. Suspendisse egestas purus nisi, et bibendum lacus faucibus dignissim.
              </p>
            </div>
            <div class="col-md-5 offset-md-2">
              <div class="title3">Integer efficitur turpis a ligula</div>
              <p>
                Maecenas nec diam nibh. Ut in orci. Duis eget est quis metus auctor. Vivamus ipsum mauris, vitae nisi placerat id. Phasellus quis sagittis massa. In molestie at sem sit amet hendrerit.
              </p>
            </div>
          </div>

          <p>
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer erat justo, laoreet a laoreet vel, tincidunt in nibh. In finibus quis diam nec lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis nisi metus, non bibendum elit mattis ac.
          </p>

          <p>
            Nulla elementum sagittis viverra. Donec in erat tortor. Etiam egestas, augue sed tincidunt dapibus, lacus dui vehicula arcu, quis varius libero mi a sapien. Sed blandit posuere dui, tincidunt tincidunt libero sagittis vitae. Curabitur vel nisl eu mi interdum semper. Duis ac ex eu eros suscipit ullamcorper vel fermentum lectus.
          </p>

          <div class="panel-details clearfix">
            <div class="details-tag-wrapper">
              <div class="details-tag-txt">tags:</div>
              <ul class="details-tag">
                <li><a href="#">Fitness</a></li>
                <li><a href="#">Bicycle</a></li>
                <li><a href="#">Extreme</a></li>
                <li><a href="#">Adventure</a></li>
              </ul>
            </div>
            <div class="details-links-wrapper">
              <div class="details-links-item"><i class="fa fa-heart-o" aria-hidden="true"></i> 21</div>
              <div class="details-links-item"><i class="fa fa-share-alt" aria-hidden="true"></i> 34</div>
            </div>
          </div>



          <div class="title3">2 Comments</div>

          <div class="comment-block clearfix">
            <figure>
              <img src="images/author1.jpg" alt="" class="img-responsive">
            </figure>
            <div class="caption">
              <div class="caption-top clearfix">
                <div class="txt2"><a href="#" class="btn5">Reply</a></div>
                <div class="txt1">27 Aug 2016</div>
                <div class="author">Brandon Kelley</div>
              </div>
              <div class="txt3">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam.</div>
            </div>
          </div>
          <div class="comment-block left clearfix">
            <figure>
              <img src="images/author2.jpg" alt="" class="img-responsive">
            </figure>
            <div class="caption">
              <div class="caption-top clearfix">
                <div class="txt2"><a href="#" class="btn5">Reply</a></div>
                <div class="txt1">27 Aug 2016</div>
                <div class="author">Nicholas Rodriguez</div>
              </div>
              <div class="txt3">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam.</div>
            </div>
          </div>
          <div class="comment-block clearfix">
            <figure>
              <img src="images/author3.jpg" alt="" class="img-responsive">
            </figure>
            <div class="caption">
              <div class="caption-top clearfix">
                <div class="txt2"><a href="#" class="btn5">Reply</a></div>
                <div class="txt1">27 Aug 2016</div>
                <div class="author">Millie Lamb</div>
              </div>
              <div class="txt3">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam.</div>
            </div>
          </div>









          <br><br>

          <div class="title3">Leave A Comment</div>

          <div id="note"></div>
          <div id="fields">
            <form id="ajax-contact-form" class="form-horizontal clearfix" action="javascript:;">
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="inputName2">Name</label>
                    <input type="text" class="form-control" id="inputName2" name="name" value="" placeholder="Name">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="inputEmail">Email</label>
                    <input type="text" class="form-control" id="inputEmail" name="email" value="" placeholder="Email">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="inputWebsite">Website</label>
                    <input type="text" class="form-control" id="inputWebsite" name="website" value="" placeholder="Website">
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="inputMessage2">Messages</label>
                <textarea class="form-control" rows="5" id="inputMessage2" name="content" placeholder="Messages"></textarea>
              </div>

              <button type="submit" class="btn2">send messages</button>
            </form>
          </div>







        </div>
      </div>
      <div id="partners">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner01.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner02.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner03.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner04.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner05.png" alt="" class="img-fluid"></a>
              </div>
            </div>
            <div class="col-md-2">
              <div class="partner1">
                <a href="#"><img src="images/partner06.png" alt="" class="img-fluid"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bot-wrapper">
        <div class="bot1-wrapper">
          <div class="container">
            <div class="bot1 clearfix">
              <div class="logo2_wrapper">
                <a href="index.html" class="logo2">
                  <img src="images/logo2.png" alt="" class="img-fluid">
                </a>
              </div>
              <div class="social-footer-wrapper">
                <ul class="social-footer clearfix">
                  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                  <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                </ul>
              </div>
              <p>
                <i>
                  Excepteur sint occaecat cupidatat non proident, sunt in culpa  officia deserunt<br>mollitid est laborum. Sed ut perspiciatis unde qui omnis.
                </i>
              </p>
            </div>
          </div>
        </div>
        <div class="bot2-wrapper">
          <div class="container">
            <div class="bot2 clearfix">
              <div class="row">
                <div class="col-md-4">
                  <div class="bot2-title">
                    Latest Twitter
                  </div>
                  <div class="contact1">
                    <b>A:</b> 40 Baria Sreet 133/2 NewYork City, US
                  </div>
                  <div class="contact1">
                    <b>P:</b> (00) 123 456 789
                  </div>
                  <div class="contact1">
                    <b>F:</b> (00) 987 654 321
                  </div>
                  <div class="contact1">
                    <b>E:</b> <a href="#">info.contact@gmail.com</a>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="bot2-title">
                    recent posts
                  </div>
                  <div class="recent-posts clearfix">
                    <a href="#" class="clearfix">
                      <figure><img src="images/recent-posts1.jpg" alt="" class="img-fluid"></figure>
                      <div class="caption">
                        <div class="txt1">The difference between art and design in nowadays</div>
                        <div class="txt2">13 March, 2016</div>
                      </div>
                    </a>
                  </div>
                  <div class="recent-posts clearfix">
                    <a href="#" class="clearfix">
                      <figure><img src="images/recent-posts2.jpg" alt="" class="img-fluid"></figure>
                      <div class="caption">
                        <div class="txt1">The difference between art and design in nowadays</div>
                        <div class="txt2">13 March, 2016</div>
                      </div>
                    </a>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="bot2-title">
                    RECENT WORKS
                  </div>
                  <ul class="best1 clearfix">
                    <li><a href="#"><img src="images/recent-works1.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works2.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works3.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works4.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works5.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works6.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works7.jpg" alt="" class="img-fluid"></a></li>
                    <li><a href="#"><img src="images/recent-works8.jpg" alt="" class="img-fluid"></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bot3-wrapper">
          <div class="container">
            <div class="bot3 clearfix">
              <ul class="menu-bot">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
              <div class="copyrights">Copyright @2018 <a href="https://gridgum.com" target="_blank">Gridgum</a>. All rights Revierves Inc.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/superfish.js"></script>
    <script src="js/jquery.superslides.js"></script>
    <script src="js/jquery.fancybox.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.appear.js"></script>
    <script src="js/owl.carousel.js"></script>

    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/imagesloaded.pkgd.js"></script>

    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>

  </body>
</html>
